<template>
	<div class="cmt-container">
		<h3>发表评论</h3>
		<hr />
		<textarea placeholder="请输入评论的内容(最多吐槽120字)" maxlength="120"></textarea>
		<mt-button type="primary" size="large">发表评论</mt-button>
		<div class="cmt-list">
			<div class="cmt-item" v-for="item,i in comments" :key="item.user_name">
				<div class="cmt-title">
					第{{i+1}}楼&nbsp;&nbsp;{{item.user_name}}&nbsp;&nbsp;发表时间:{{item.add_time|dateFormat}}
				</div>
				<div class="cmt-boady">
					{{item.content=='undefined'?"此用户很赖,嘛都没说!":item.content}}
				</div>
			</div>
		</div>
		<mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
	</div>
</template>

<script>
	import {Toast} from 'mint-ui'
	export default {
		data() {
			return {
				pageIndex:1,
				comments:[
					{user_name:"匿名用户",add_time:new Date,content:"锄禾日当午,汗滴禾下厨"},
					{user_name:"李白",add_time:new Date,content:"举头望明月,低头思故乡"},
					{user_name:"李小白",add_time:new Date,content:"风吹草地见牛羊"},
					{user_name:"李大白",add_time:new Date,content:"我很白,纯洁的白"},
					{user_name:"江小白",add_time:new Date,content:"劝君更进一杯酒"},
					{user_name:"小白",add_time:new Date,content:"undefined"},
				]
			}
		},
		created() {
			this.getComments()
		},
		methods:{
			getComments() {
				Toast("<h1>"+this.pageIndex+"</h1>");
				this.comments.concat([]);
			},
			getMore() {
				this.pageIndex++;
				this.getComments();
			}
		},
		props:["id"]
	}
</script>

<style lang="scss" scoped="scoped">
	.cmt-container {
		h3 {
			font-size: 1.125rem;
		}
		textarea {
			font-size: 0.875rem;
			height: 5.3125rem;
			margin: 0;
		}
		.cmt-list {
			margin: 0.3125rem;
			.cmt-item {
				font-size: 0.8125rem;
				.cmt-title {
					line-height: 1.875rem;
					background-color: #8F8F94;
				}
				.cmt-boady {
					line-height: 2.1875rem;
					text-indent: 2em;
				}
			}
		}
	}
</style>
